<!DOCTYPE html>
<html lang="en">
<head>
    <div th:replace="base :: #pageInfo"></div>
    <link rel="stylesheet" href="./dance/css/video.min.css">
    <link rel="iocn" href="./dance/favicon.ico">
    <link rel="stylesheet" href="./dance/css/paginate.min.css">
</head>
<body>


    <!-- 导航栏 -->
    <div th:replace="base :: #navbar"></div>

    <!-- 视频列表 -->
    <div class="video">
        <div class="title"><img src="/dance/img/yd.png" alt="">精彩视频</div>
        <div class="list">
            <a href="/videoDetail/1">
                <div>
                    <div class="t">
                        <img src="/dance/img/16152691398274.jpg" alt="">
                        <div>流行舞导师团体《float》教学</div>
                    </div>
                    <div class="xq">
                        拍摄时间：单色舞蹈<br>
                        舞蹈类型：街舞<br>
                        授课导师：单色舞蹈
                    </div>
                </div>
            </a>
        </div>
        <div class="paging-area">
            <input type="hidden" id="totalPage" value="6"/>
            <div class="box-paging" id="box-paging">
            </div>
        </div>
    </div>


    <!-- 页脚 -->
    <div th:replace="base :: #footer"></div>

    <script src="./dance/js/jquery.min.js"></script>
    <script src="./dance/js/jquery-paginate.js"></script>
    <script>
        //分页功能
        var total = parseInt($("#totalPage").val());
        $('.box-paging').paginate({
            pageIndex: 0, //当前页数
            totlePageCount: 16, //总页数
            maxBtnCount: 4, //按钮数量最多有
            hasDots: true, //是否显示省略号
            hasFirstLast: true, //是否开启首尾页跳转功能
            btnClass: 'pager-numbtn', //数字按钮类名
            pageTurnClass: 'pager-turnbtn', //翻页按钮类名
            firstLastClass: 'pager-flbtn', //首页尾页按钮类名
            prevPageName: '上页', //“上一页”标签文字
            nextPageName: '下页', //“下一页”标签文字
            firstPageName: '首页',
            lastPageName: '尾页',
            callback: function (api) {
                console.log(api)
            }
        });
    </script>
</body>
</html>
